import React, { useEffect, useState } from 'react'
import { PageHeader,Descriptions } from 'antd';
import { useParams } from 'react-router';
import moment from 'moment'
import axios from 'axios'

export default function NewsPreive(props:any) {
  const {id}=useParams();
  const [dataSource,setDataSource]=useState(0);
  const auditList=["未审核", '审核中', '已通过', '未通过'];
  const publishList = ["未发布", '待发布', '已上线', '已下线'];

  useEffect(()=>{
    axios.get(`http://localhost:8000/news/${id}`).then(res=>{
      const list=res.data
        setDataSource(list)
    })
  },[id])
  console.log(dataSource);
  return (
    <>
     {dataSource&&<>
      <PageHeader
        className="site-page-header"
        onBack={() => {window.history.back()}}
        title={dataSource.title}
        subTitle={dataSource.categoryId}
      />
      <Descriptions size="small" column={3}>
        <Descriptions.Item label="创建者">{dataSource.author}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{moment(dataSource.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
        <Descriptions.Item label="发布时间">{dataSource.publishTime?moment(dataSource.publishTime).format("YYYY/MM/DD HH:mm:ss"): "-"}</Descriptions.Item>
        <Descriptions.Item label="区域">{dataSource.region}</Descriptions.Item>
        <Descriptions.Item label="审核状态" contentStyle={{color:'red'}}>{auditList[dataSource.auditState]}</Descriptions.Item>
        <Descriptions.Item label="发布状态"  contentStyle={{color:'red'}}>{publishList[dataSource.publishState]}</Descriptions.Item>
        <Descriptions.Item label="访问数量">{dataSource.view}</Descriptions.Item>
        <Descriptions.Item label="点赞数量">{dataSource.star}</Descriptions.Item>
        <Descriptions.Item label="评论数量">0</Descriptions.Item>
      </Descriptions></>}
      <div style={{border:'1px solid black',padding:'10px'}}>
      内容：<div style={{overflow:'auto',height:'400px'}} dangerouslySetInnerHTML={{__html:dataSource.content}}></div>
      </div>
    </>
  )
}
